<template>
  <div class="searchlist">
      <transition-group name="list" tag="ul">
          <li class="searchlistitem" v-for="(item) in  searches" :key = "item" @click="selectItem(item)">
              <span class="text">{{item}}</span>
              <span class="icon" @click.stop="deleteOne(item)">
                  <i class="delete">X</i>
              </span>
          </li>
      </transition-group>
  </div>
</template>

<script>
export default {
    props:{
        searches:{
            type:Array,
            default:null
        }
    },
    methods:{
        selectItem(item){
            this.$emit('select',item)
        },
        deleteOne(item){
            this.$emit('delete',item)
        }
    }
}
</script>

<style lang="stylus" scoped>
@import "~commom/stulys/variable.styl"
@import "~commom/stulys/mixin.styl"
.searchlist
    .searchlistitem
        display flex
        align-items center
        height 30px
        overflow hidden
        padding-right 5px
        box-sizing border-box
        &.list-enter-active,&.list-leave-active
            transition all 0.1s
        &.list-enter,&.list-leave-to
            height 0
        .text
            flex 1
            color $color-text-l
            font-size $font-size-small
        .icon
            extend-click()
            .delete
                font-size $font-size-small
                color $color-text-d
</style>